import React, { useEffect } from "react";
import styles from "./main.module.less";
import SvgIcon from "@components/SvgIcon";
import { useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import { monthNotDoneAction } from "@redux/actions02";

const weeks = ["一", "二", "三", "四", "五", "六", "日"];

const Main = (props) => {
    const { getCalendar, ym, monthNotDoneAction, monthList } = props;

    const navigate = useNavigate();

    useEffect(() => {
        ym.y && ym.m && monthNotDoneAction(ym.y, ym.m);
    }, [monthNotDoneAction, ym.y, ym.m]);

    return (
        <div className={styles.main}>
            <div className={styles.th}>
                {weeks.map((item, index) => {
                    return (
                        <span key={index} className={styles[`sp${index + 1}`]}>
                            {item}
                        </span>
                    );
                })}
            </div>
            <div className={styles.inner}>
                {getCalendar(ym.y, ym.m).map((item, index) => {
                    return (
                        <div
                            key={index}
                            className={`
              ${styles.grid} 
              ${
                  item
                      ? ym.y === new Date().getFullYear() &&
                        ym.m === new Date().getMonth() + 1 &&
                        item === new Date().getDate()
                          ? `${styles.date} ${styles.active}`
                          : styles.date
                      : styles.no
              }
            `}
                            onClick={() => {
                                item &&
                                    navigate(
                                        `/todos?y=${ym.y}&m=${ym.m}&d=${item}`
                                    );
                            }}
                        >
                            {item}
                            {monthList &&
                            item &&
                            monthList["a" + ym.y + "-" + ym.m + "-" + item] ? (
                                <span className={styles.red_dot}>
                                    {
                                        monthList[
                                            "a" + ym.y + "-" + ym.m + "-" + item
                                        ]
                                    }
                                </span>
                            ) : null}
                        </div>
                    );
                })}
            </div>
            <div
                className={styles.edit_holidy}
                title="自定义节日"
                onClick={() => {
                    navigate("/customizeFestival");
                }}
            >
                <SvgIcon font="icon-bianji" />
            </div>
        </div>
    );
};

export default connect(
    (state) => ({
        monthList: state.notDoneMonthReducer,
    }),
    { monthNotDoneAction }
)(Main);
